import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { TopicTabsMock } from './mock'
import { NavLink } from 'react-router-dom'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { TopicService } from '../../../../transfer/service/TopicService'

export default function TopicTabs() {
    const [topic, setTopic] = useRecoilState(TopicTabsMock)
    const [left, setLeft] = useState(0)
    // const [listWarpWidth, setListWarpWidth] = useState<any>()

    // 初始化专题列表数据
    useEffect(() => {
        new TopicService().getAllTopic().then(res => {
            setTopic(res.data.data)
        })
    }, [])

    // 判定专题列表左右移动
    useEffect(() => {
        const listWarp = $(`.${style.list__warp}`)
        let start_scroll_top: number | undefined = 0
        let listWidth = (document.querySelector(`.${style.list__warp}`) as any).scrollWidth
        listWarp.on('scroll', () => {
            let end_scroll_top = listWarp.scrollLeft()

            if (start_scroll_top! > 0) {
                $('#ctl__btn__left').addClass('active')
            }
            if (end_scroll_top! <= 0) {
                $('#ctl__btn__left').removeClass('active')
            }
            if (end_scroll_top! >= listWidth - listWarp.innerWidth()! - 1) {
                $('#ctl__btn__right').addClass('active')
            }
            if (end_scroll_top! < listWidth - listWarp.innerWidth()! - 1) {
                $('#ctl__btn__right').removeClass('active')
            }
            start_scroll_top = listWarp.scrollLeft()
        })
    }, [])

    // 初始化适应
    useEffect(() => {
        if ($('#home__tabs').outerWidth(true)! > 1050) {
            $('#ctl__btn__right').addClass('hide')
            $('#ctl__btn__left').addClass('hide')
        } else {
            $('#ctl__btn__right').removeClass('hide')
            $('#ctl__btn__left').removeClass('hide')
        }
    }, [])

    // 自适应专题列表左右移动布局
    const handleBtnCtlClick = (type: string) => {
        const listWarp = $(`.${style.list__warp}`)
        let toLeft = listWarp.scrollLeft()
        if (type == 'left') {
            listWarp.animate({ scrollLeft: (toLeft! -= 100) }, 500)
        } else {
            listWarp.animate({ scrollLeft: (toLeft! += 100) }, 500)
        }
    }

    return (
        <div
            className={style.container}
            style={
                {
                    // ['--warp-width' as any]: listWarpWidth
                }
            }>
            <div
                id="ctl__btn__left"
                className={`${style.topic__list__ctl__btn} ${style.ctl__btn__left}`}
                onClick={() => {
                    handleBtnCtlClick('left')
                }}>
                <LeftOutlined />
            </div>
            <div
                id="ctl__btn__right"
                className={`${style.topic__list__ctl__btn} ${style.ctl__btn__right}`}
                onClick={() => {
                    handleBtnCtlClick('right')
                }}>
                <RightOutlined />
            </div>
            <div className={style.list__warp}>
                {topic.map((item, index) => {
                    if (item.state) {
                        return (
                            <NavLink key={index} to={'/topic/' + item.id} className={style.link}>
                                <span>{item.title}</span>
                            </NavLink>
                        )
                    }
                })}
            </div>
        </div>
    )
}
